<template>
      <div class="back">
          <div class="box_">
               <div class="user_img">
                   <img :src="url_" alt="" title="头像">
                  <div class="upload">
                      上传头像
                      <input type="file"  @change="fil_($event)" class="file">
                  </div>
               </div>
               <div class="content">
                <label>
                    账号：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="input_" v-model="account" disabled>
                </label>
                 <label>
                     密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" class="input_" v-model="password">
                 </label>
                   <label>
                       用户名：<input type="text" class="input_" v-model="users.username">
                   </label>
              </div>
              <div class="choose">
                    <button  @click="submitHead" >提交</button>
                    <button @click="shutDown(0)">关闭</button>
              </div>
              <p class="other" @click="_userInfo">其他信息</p>
          </div>
      </div>
</template>

<script>
import api from "@/api";
import {baseUrl} from "@/config/api/global";

export default {
    name: "PersonalInformation",
    data(){
      return{
          files_:"",
          url_old:"",
          url_:"",
          password:"••••••••",
          user:"",
          account: "",
          users:{
              avatar:"",
              username:null,
              password:null,
          },
          dis:1,
      }
    },

    mounted() {
        this.user = JSON.parse(window.localStorage.getItem("user"));
        if(this.user){
            this.users.username = this.user.username
            this.url_ = this.user.avatar;
            this.url_old = this.user.avatar;
            this.account = this.user.account;
        }
    },
    methods:{
        submitHead() {
            // 添加需要上传的文件
            const form = new FormData();
            let _this = this;

            if(this.files_) {
                form.append('file', this.files_);
                form.append('oldImg', _this.url_old);
                api.uploadUserHeader(form).then((res) => {
                    if (res.data.code === 200) {
                        _this.url_ = res.data.data;
                        _this.user.avatar = res.data.data;
                        this.$store.commit("requestInfo", "头像保存成功");
                    } else {
                        this.$store.commit("requestInfo", "头像保存失败");
                    }
                    _this.updateInfo();
                })
            }else {
                this.updateInfo();
            }

        },
        updateInfo(){
            let logUser = 0;
            if (this.password !=="" && this.password !=="••••••••"){
                this.users.password = this.password;
                logUser = 1;
            }else {
                this.users.password = null;
            }
            if(this.user.password!=null ||  this.users.username !== this.user.username ){
                api.AdminInfo(this.users).then((res)=>{
                    if(res.data.code === 200){
                        this.user.username = this.users.username;
                        window.localStorage.setItem("user",JSON.stringify(this.user));
                        if(logUser === 1){
                            alert("保存成功,由于密码更改请重新登录")
                            window.localStorage.clear()
                            this.$router.push("/login")
                        }else {
                            this.$store.commit("requestInfo", "信息保存成功");
                        }

                    }else {
                        this.$store.commit("requestInfo", "信息保存失败");
                    }
                    setTimeout(()=>{
                        this.shutDown(2)
                    },1500)
                })
            }else {
                setTimeout(()=>{
                    this.shutDown(2)
                },1500)
            }

        },
        _userInfo(){
            this.$emit("shutDown",1);
            this.url_ = "";
            this.files_ = "";
            window.localStorage.setItem("edit_info",JSON.stringify(this.user));


        },
        shutDown(info){
          this.files_ = "";
          this.users.avatar = null;
          this.users.username = null;
          this.users.password = null;
          this.password ="••••••••";
          this.url_old = "";
          this.$emit("shutDown",info);
        },
        fil_(event){
            this.url_old = this.url_;
            this.url_ = this.echo(event)
            this.files_ =event.target.files[0];
        },
        echo(event){
            //根据这个 <input> 获取文件的 HTML5 js 对象
            let files = event.target.files;
            let file;
            if (files && files.length > 0) {
                file = files[0];
                if (file.size > 1024 * 1024 * 5) {
                    this.$store.commit("requestInfo", "图片大小不能超过 5MB!");
                    return "";
                }
                let URL = window.URL || window.webkitURL;
                return  URL.createObjectURL(file);
            }
        },
    }
}
</script>

<style scoped>
.other{
    position: absolute;
    bottom: 3%;
    right: 3%;
    font-size: 13px;
    color: #3586f1;
}
.other:hover{
    cursor: pointer;
    text-decoration: underline;
}
.choose{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
button{
    outline: none;
    padding: 7px 15px;
    color: white;
    border: 0;
    background: #3586f1;
    border-radius: 3px;
    margin: 5px;
}
button:hover{
    cursor: pointer;
    opacity: .8;
}
.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.user_img{
    padding: 5px;
}
.upload{
    position: relative;
    font-size: 14px;
    color: white;
    background: #3586f1;
    padding: 5px 10px;
    border-radius: 3px;
}
.upload:hover{
    opacity: .8;
    cursor: pointer;
}
.input_{
    text-indent: 0.5rem;
    outline: none;
    width: 180px;
    height: 28px;
    border: 0;
    border-bottom: 1px solid #8f8c8c;
    border-radius: 2px;
    margin: 5px;
}
.file{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.back{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(143, 140, 140, 0.1);
    z-index: 999999999;
}
.box_{
    position: relative;
    width: 300px;
    height: 340px;
    background: white;
    border-radius: 3px;
    padding: 10px;
    animation:box_p .3s ease-in-out 0s 1 forwards ;
}
@keyframes box_p {
    0%{
        transform: scale(0);
    }
    90%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }

}
.user_img{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.user_img img{
    width: 90px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-bottom: 10px;
    object-fit: cover;
}
</style>